<template>
	<view class="staff-detail">
		<view class="staff-gap"></view>
		
		<u--form 
			:model="postForm" 
			:rules="postRules" 
			errorType="none" 
			labelPosition="top" 
			labelWidth="auto" 
			ref="postRef" 
			:labelStyle="{'font-size': '30rpx'}">
			<view class="staff-form">
				<u-form-item label="员工姓名" prop="staffName" borderBottom>
					<u-input 
						v-model="postForm.staffName" 
						border="none" 
						inputAlign="left" 
						fontSize="30" 
						placeholder="请输入员工姓名" 
						placeholderClass="contact-inputholder" 
					></u-input>
				</u-form-item>

				<u-form-item label="手机号码" prop="mobile" borderBottom>
					<u-input 
						v-model="postForm.mobile" 
						border="none" 
						inputAlign="left" 
						fontSize="30" 
						placeholder="请输入手机号码" 
						placeholderClass="contact-inputholder" 
					></u-input>
				</u-form-item>
				
				<u-form-item label="岗位" prop="county" @click="onTogglePost">
					<u-input 
						:value="postFormat" 
						border="none" 
						inputAlign="left" 
						disabled 
						disabledColor="#fff" 
						fontSize="30" 
						placeholder="请选择岗位" 
						placeholderClass="contact-inputholder" 
					></u-input>
					<view slot="right" class="m-l-10">
						<view class="icon-anim" :class="{'icon-run': showPost}">
							<u-icon name="arrow-right" color="#333" size="24rpx"></u-icon>
						</view>
					</view>
				</u-form-item>
			</view>
		</u--form>
		
		<view class="staff-submit">
			<template v-if="update">
				<u-button
					type="error" 
					shape="circle" 
					:customStyle="{'height': '90rpx', 'font-size': '28rpx'}"
					@click="handleDelete"
				>删除员工</u-button>
				<view class="gap-v"></view>
			</template>
			
			<u-button
				type="primary" 
				shape="circle" 
				:customStyle="{'height': '90rpx', 'font-size': '28rpx'}"
				:loading="submitLoading"
				@click="handleSubmit"
			>{{ update ? '确定更新' : '确定新增' }}</u-button>
		</view>
		
		<!-- 选择岗位 -->
		<u-picker
			:show="showPost" 
			:columns="[postOptions]" 
			itemHeight="88" 
			title="选择岗位" 
			keyName="dictLabel" 
			closeOnClickOverlay 
			confirmColor="#13a0e7" 
			@close="onTogglePost" 
			@cancel="onTogglePost" 
			@confirm="onPostConfirm"
		></u-picker>
	</view>
</template>

<script>
	import { deepClone } from "@/utils/util.js"
	import { staffInfo, staffDel, staffSave } from '@/api/staff.js'
	import { PostType, PostTypeLabel } from '@/utils/enum.js'
	
	const postForm = {
		staffName: '',
		mobile: '',
		postId: null,
	}
	
	const postRules = {
		staffName: [
			{ required: true, message: '请输入员工姓名', trigger: ['blur', 'change'] },
			{ min: 2, max: 10, message: '员工姓名长度为2-10个字符', trigger: ['blur', 'change'] },
		],
		mobile: [
			{ required: true, message: '请输入11位手机号', trigger: ['blur', 'change'] },
			{
				validator: (rule, value, callback) => uni.$u.test.mobile(value), 
				message: '手机号格式不正确', 
				trigger: ['blur'] ,
			},
		],
		postId: [
			{ required: true, message: '请选择岗位', trigger: ['change'] },
		],
	}
	
	// 岗位
	const postOptions = [
		{ dictLabel: PostTypeLabel[PostType.stock], dictValue: PostType.stock },
		{ dictLabel: PostTypeLabel[PostType.staff], dictValue: PostType.staff },
	]
	
	export default {
		props: {
			update: Boolean,
			staffId: [Number, String],
		},
		data() {
			return {
				postForm: deepClone(postForm),
				postRules: postRules,
				submitLoading: false,

				showPost: false,
				postOptions,
			}
		},
		computed: {
			// 岗位文本
			postFormat() {
				const item = this.postOptions.find(v => v.dictValue == this.postForm.postId)
				return item ? item.dictLabel : ''
			},
		},
		watch: {
			staffId() {
				if (this.update) {
					this.getInfo()
				} else {
					this.postForm = deepClone(postForm)
				}
			}
		},
		created() {
			// #ifdef H5
			if (this.update) {
				this.getInfo()
			} else {
				this.postForm = deepClone(postForm)
			}
			// #endif
		},
		methods: {
			// 详情
			async getInfo() {
				try {
					uni.showLoading({ title: '加载中' })
					const { data } = await staffInfo(this.staffId)
					this.postForm = data
				} finally {
					uni.hideLoading()
				}
			},
			// 显示岗位
			onTogglePost() {
				this.showPost = !this.showPost
			},
			// 选择岗位
			onPostConfirm(event) {
				this.postForm.postId = event.value[0].dictValue + ''
				this.onTogglePost()
			},
			// 提交
			handleSubmit() {
				this.$refs.postRef.validate().then(async () => {
					try {
						this.submitLoading = true
						await staffSave(this.postForm, this.update)
						this.$emit('submit', this.postForm)
						uni.navigateBack()
					} catch(e) {
						uni.showToast({
							title: e.message,
							icon: 'none'
						})
					} finally {
						this.submitLoading = false
					}
				}).catch(errors => {
					uni.showToast({
						title: errors[0].message || '请填写必填项',
						icon: 'none'
					})
				})
			},
			// 删除
			handleDelete() {
				uni.showModal({
					title: '删除',
					content: '确定要删除该员工吗？',
					confirmText: '确定',
					success: async ({ confirm }) => {
						if (!confirm) return false
						try {
							uni.showLoading({ title: '正在删除' })
							await staffDel(this.staffId)
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})
							this.$emit('submit', this.postForm)
							uni.navigateBack()
						} catch(e) {
							uni.showToast({
								title: e.message,
								icon: 'none'
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.contact-inputholder {
		font-size: 30rpx;
		font-weight: 300;
		line-height: 1.2;
		color: $u-tips-color !important;
	}
</style>
<style lang="scss" scoped>
	.staff-detail {
		.staff-tips {
			padding: 30rpx;
			background-color: $u-nav-color;
			&-title {
				font-size: 44rpx;
				font-weight: normal;
				line-height: 1;	
				color: $u-main-color;
			}
			&-info {
				margin-top: 10rpx;
				font-size: 28rpx;
				font-weight: normal;
				color: $u-content-color;
			}
		}
		.staff-gap {
			height: 20rpx;
		}
		.staff-form {
			padding: 10rpx 30rpx;
			background-color: #fff;
			.icon-anim {
				transition: transform 0.2s;
				transform: rotate(0deg);
			}
			.icon-anim.icon-run {
				transform: rotate(90deg);
			}
		}
		.staff-submit {
			padding: 50rpx 30rpx;
		}
	}
</style>